<template>
    <transition name="fade">
        <div class="music-detail-view" v-if="showMusicDetail">
            <div class="background-blur" :style="{ backgroundImage: `url(${currentSong.cover})` }"></div>
            <div class="content">
                <div class="header">
                    <button class="close-btn" @click="closeMusicDetail" aria-label="关闭">×</button>
                </div>

                <div class="main-panel">
                    <div class="song-display">
                        <img :src="currentSong.cover" :class="['album-art', { 'playing': isPlaying }]" alt="Album Art">
                        <h2>{{ currentSong.name }}</h2>
                        <div class="artist-container">
                            <span v-for="(artist, index) in currentSong.artists" :key="artist.id">
                                <a @click.prevent="showArtistTopSongs(artist.id)" class="artist-link">{{ artist.name
                                }}</a>
                                <span v-if="index < currentSong.artists.length - 1"> / </span>
                            </span>
                        </div>

                        <!-- 歌词面板 -->
                        <div class="lyric-panel-left" ref="lyricPanel">
                            <ul class="lyric-list">
                                <li class="lyric-line" v-for="(line, index) in parsedLyric" :key="index"
                                    :class="{ 'current': index === currentLyricLine }">
                                    {{ line.text || '&nbsp;' }}
                                </li>
                            </ul>
                            <p v-if="!parsedLyric || parsedLyric.length === 0" class="no-lyric">暂无歌词</p>
                        </div>

                        <div class="progress-bar-container">
                            <span class="time-text">{{ formatTime(currentTime) }}</span>
                            <input type="range" class="progress-bar" :max="duration" :value="currentTime"
                                @input="onSeek">
                            <span class="time-text">{{ formatTime(duration) }}</span>
                        </div>
                        <div class="controls">
                            <button class="control-btn" @click="prevSong" aria-label="上一首">
                                <svg class="control-icon" viewBox="0 0 24 24">
                                    <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"></path>
                                </svg>
                            </button>
                            <button class="control-btn main-play-btn" @click.stop="togglePlay" aria-label="播放/暂停">
                                <svg v-if="!isPlaying" class="control-icon" viewBox="0 0 24 24">
                                    <path d="M8 5v14l11-7z"></path>
                                </svg>
                                <svg v-else class="control-icon" viewBox="0 0 24 24">
                                    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
                                </svg>
                            </button>
                            <button class="control-btn" @click="nextSong" aria-label="下一首">
                                <svg class="control-icon" viewBox="0 0 24 24">
                                    <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"></path>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="playlist-panel">
                        <div class="tabs">
                            <button :class="{ active: activeTab === 'queue' }"
                                @click="activeTab = 'queue'">播放队列</button>
                            <button :class="{ active: activeTab === 'new-songs' }"
                                @click="activeTab = 'new-songs'">推荐新歌</button>
                            <button :class="{ active: activeTab === 'hot' }" @click="activeTab = 'hot'">热门歌单</button>
                            <button :class="{ active: activeTab === 'charts' }"
                                @click="activeTab = 'charts'">排行榜</button>
                            <button :class="{ active: activeTab === 'search' }"
                                @click="activeTab = 'search'">搜索</button>
                        </div>
                        <div class="tab-content">
                            <ul v-show="activeTab === 'queue'" class="song-list">
                                <li v-for="(song, index) in playlist" :key="song.id" @click="changeSong(index)"
                                    :class="{ 'active': index === currentSongIndex }">
                                    <span class="index">{{ index + 1 }}</span>
                                    <span class="name">{{ song.name }}</span>
                                    <span class="artist">
                                        <span v-for="(artist, artistIndex) in song.artists" :key="artist.id">
                                            <a @click.prevent.stop="showArtistTopSongs(artist.id)"
                                                class="artist-link">{{
                                                    artist.name }}</a>
                                            <span v-if="artistIndex < song.artists.length - 1"> / </span>
                                        </span>
                                    </span>
                                </li>
                            </ul>
                            <div v-show="activeTab === 'new-songs'" class="song-list-panel">
                                <ul class="song-list search-results">
                                    <li v-for="song in newSongs" :key="song.id" @click="playSearchResult(song)">
                                        <img :src="song.cover" alt="cover" class="song-cover-small">
                                        <div class="song-details">
                                            <span class="name">{{ song.name }}</span>
                                            <span class="artist">{{ song.artist }}</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div v-show="activeTab === 'hot'" class="charts-panel">
                                <ul class="charts-list">
                                    <li v-for="playlist in hotPlaylists" :key="playlist.id"
                                        @click="handleChartClick(playlist.id)">
                                        <img :src="playlist.coverImgUrl" class="chart-cover" alt="cover">
                                        <span class="chart-name">{{ playlist.name }}</span>
                                    </li>
                                </ul>
                            </div>
                            <div v-show="activeTab === 'charts'" class="charts-panel">
                                <ul class="charts-list">
                                    <li v-for="chart in toplists" :key="chart.id" @click="handleChartClick(chart.id)">
                                        <img :src="chart.coverImgUrl" class="chart-cover" alt="cover">
                                        <span class="chart-name">{{ chart.name }}</span>
                                    </li>
                                </ul>
                            </div>
                            <div v-show="activeTab === 'search'" class="search-panel">
                                <div class="search-bar">
                                    <input type="text" v-model="searchKeyword"
                                        :placeholder="defaultSearchKeyword || '搜索歌曲'" @keyup.enter="performSearch" />
                                    <button @click="performSearch" :disabled="isSearching">
                                        <span v-if="!isSearching">搜索</span>
                                        <span v-else>搜索中...</span>
                                    </button>
                                </div>
                                <ul class="song-list search-results">
                                    <li v-for="song in searchResults" :key="song.id" @click="playSearchResult(song)">
                                        <img :src="song.cover" alt="cover" class="song-cover-small">
                                        <div class="song-details">
                                            <span class="name">{{ song.name }}</span>
                                            <span class="artist">{{ song.artist }}</span>
                                        </div>
                                    </li>
                                </ul>
                                <p v-if="!isSearching && searchResults.length === 0" class="no-results">
                                    输入关键词，按 Enter 或点击搜索
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
    name: "MusicDetail",
    data() {
        return {
            activeTab: 'queue',
            searchKeyword: '',
        }
    },
    computed: {
        ...mapState('music', ['showMusicDetail', 'playlist', 'currentSongIndex', 'isPlaying', 'currentTime', 'duration', 'parsedLyric', 'currentLyricLine', 'isSearching', 'searchResults', 'toplists', 'defaultSearchKeyword', 'hotPlaylists', 'newSongs']),
        ...mapGetters('music', ['currentSong']),
    },
    watch: {
        showMusicDetail(isShown) {
            if (isShown) {
                this.activeTab = 'queue';
            }
        },
        currentLyricLine() {
            this.$nextTick(() => {
                if (!this.$refs.lyricPanel) return;
                const activeLine = this.$refs.lyricPanel.querySelector('.lyric-line.current');
                if (activeLine) {
                    activeLine.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center',
                        inline: 'nearest'
                    });
                }
            })
        }
    },
    methods: {
        ...mapActions('music', ['closeMusicDetail', 'togglePlay', 'nextSong', 'prevSong', 'changeSong', 'updateCurrentTime', 'search', 'playSearchResult', 'loadPlaylist']),
        showArtistTopSongs(artistId) {
            this.$store.dispatch('music/loadArtistTopSongs', artistId);
        },
        formatTime(seconds) {
            if (isNaN(seconds) || seconds < 0) {
                return '00:00';
            }
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
        },
        onSeek(e) {
            const audioPlayer = document.querySelector('.mini-music-player audio');
            if (audioPlayer) {
                audioPlayer.currentTime = e.target.value;
                this.updateCurrentTime(parseFloat(e.target.value));
            }
        },
        performSearch() {
            this.search(this.searchKeyword);
        },
        handleChartClick(chartId) {
            this.loadPlaylist(chartId);
            this.activeTab = 'queue'; // 加载后自动切换到播放队列
        }
    },
};
</script>

<style lang="scss" scoped>
.music-detail-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    color: white;
}

.background-blur {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.6);
    z-index: -1;
}

.content {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    padding: 15px;
    text-align: right;
    flex-shrink: 0;
    position: relative;
    z-index: 10;

    .close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 36px;
        cursor: pointer;
        line-height: 1;
        opacity: 0.8;
        padding: 0 10px;

        &:hover {
            opacity: 1;
        }
    }
}

.main-panel {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 50px 50px;
    gap: 50px;
    overflow: auto;

    @media (max-width: 1024px) {
        padding: 0 30px 30px;
        gap: 30px;
    }

    @media (max-width: 768px) {
        flex-direction: column;
        padding: 0 20px 20px;
        gap: 20px;
        justify-content: flex-start;
        overflow-y: auto;
    }
}

.song-display {
    text-align: center;
    width: 400px;
    flex-shrink: 0;

    @media (max-width: 1024px) {
        width: 350px;
    }

    @media (max-width: 768px) {
        width: 100%;
        max-width: 320px;
        margin-top: 10px;
    }

    .album-art {
        width: 300px;
        height: 300px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        margin-bottom: 20px;

        &.playing {
            animation: rotate 12s linear infinite;
        }

        @media (max-width: 1024px) {
            width: 250px;
            height: 250px;
        }

        @media (max-width: 768px) {
            width: 200px;
            height: 200px;
            border-radius: 15px;
        }

        @media (max-width: 480px) {
            width: 180px;
            height: 180px;
        }
    }

    h2 {
        font-size: 28px;
        margin: 10px 0;
        word-break: break-word;

        @media (max-width: 768px) {
            font-size: 22px;
            margin: 8px 0;
        }

        @media (max-width: 480px) {
            font-size: 18px;
        }
    }

    .artist-container {
        opacity: 0.8;
        margin-bottom: 15px;
        word-break: break-word;

        @media (max-width: 768px) {
            margin-bottom: 10px;
            font-size: 14px;
        }

        .artist-link {
            color: inherit;
            text-decoration: none;
            transition: all .2s;

            &:hover {
                opacity: 0.8;
                text-decoration: underline;
            }
        }
    }

    .lyric-panel-left {
        height: 100px;
        overflow: hidden;
        margin: 20px 0;
        position: relative;
        text-align: center;

        @media (max-width: 768px) {
            height: 80px;
            margin: 15px 0;
        }

        &:before,
        &:after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 30px;
            z-index: 1;
        }

        &:before {
            top: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
        }

        &:after {
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
        }

        .lyric-list {
            list-style: none;
            padding: 40px 0;
            margin: 0;
            box-sizing: border-box;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;

            /* Firefox */
            &::-webkit-scrollbar {
                display: none;
                /* Chrome, Safari, and Opera */
            }
        }

        .lyric-line {
            padding: 8px 15px;
            font-size: 15px;
            color: rgba(255, 255, 255, 0.5);
            opacity: 0.5;
            transition: all 0.4s ease;
            min-height: 1.5em;

            &.current {
                color: #fff;
                font-weight: bold;
                font-size: 16px;
                transform: scale(1.05);
                opacity: 1;
            }

            @media (max-width: 768px) {
                padding: 6px 10px;
                font-size: 14px;

                &.current {
                    font-size: 15px;
                }
            }
        }

        .no-lyric {
            padding-top: 35px;
            color: rgba(255, 255, 255, 0.5);

            @media (max-width: 768px) {
                padding-top: 25px;
            }
        }
    }

    p {
        opacity: 0.8;
    }

    .progress-bar-container {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
        margin: 20px 0;

        @media (max-width: 768px) {
            margin: 15px 0;
            gap: 10px;
        }

        .artist {
            opacity: 0.6;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;

            @media (max-width: 768px) {
                font-size: 12px;
                max-width: 120px;
            }
        }
    }

    .progress-bar {
        flex-grow: 1;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        outline: none;
        opacity: 0.7;
        transition: opacity .2s;

        &:hover {
            opacity: 1;
        }

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            background: #fff;
            cursor: pointer;
            border-radius: 50%;
        }

        &::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: #fff;
            cursor: pointer;
            border-radius: 50%;
        }

        @media (max-width: 768px) {
            height: 3px;

            &::-webkit-slider-thumb {
                width: 12px;
                height: 12px;
            }

            &::-moz-range-thumb {
                width: 12px;
                height: 12px;
            }
        }
    }

    .time-text {
        font-size: 12px;
        min-width: 40px;
        text-align: center;

        @media (max-width: 768px) {
            min-width: 35px;
            font-size: 11px;
        }
    }

    .controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;

        @media (max-width: 768px) {
            gap: 20px;
        }

        .control-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            .control-icon {
                fill: #fff;
                width: 30px;
                height: 30px;
                transition: transform 0.2s ease;

                @media (max-width: 768px) {
                    width: 24px;
                    height: 24px;
                }
            }

            &:hover .control-icon {
                transform: scale(1.1);
            }
        }

        .main-play-btn {
            .control-icon {
                width: 50px;
                height: 50px;

                @media (max-width: 768px) {
                    width: 40px;
                    height: 40px;
                }

                @media (max-width: 480px) {
                    width: 36px;
                    height: 36px;
                }
            }
        }
    }
}

.playlist-panel {
    display: flex;
    flex-direction: column;
    width: 550px;
    height: 450px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    @media (max-width: 1024px) {
        width: 450px;
        height: 400px;
    }

    @media (max-width: 768px) {
        width: 100%;
        height: 350px;
        margin-bottom: 20px;
        flex-shrink: 0;
    }

    .tabs {
        display: flex;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }

        button {
            flex: 1;
            padding: 15px 10px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            white-space: nowrap;
            min-width: 70px;

            @media (max-width: 768px) {
                padding: 12px 8px;
                font-size: 14px;
                min-width: 60px;
            }

            &.active {
                color: #fff;
                font-weight: bold;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 40px;
                    height: 3px;
                    background-color: #fff;
                    border-radius: 2px;

                    @media (max-width: 768px) {
                        width: 30px;
                        height: 2px;
                    }
                }
            }
        }
    }

    .tab-content {
        flex-grow: 1;
        overflow: hidden;
        position: relative;
    }

    .song-list,
    .search-panel,
    .charts-panel,
    .song-list-panel {
        height: 100%;
        overflow-y: auto;
    }

    .charts-panel {
        padding: 10px;
    }

    .charts-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;

        @media (max-width: 768px) {
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
        }

        @media (max-width: 480px) {
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 8px;
        }

        li {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            padding: 10px;
            border-radius: 8px;
            transition: background-color 0.2s;

            @media (max-width: 768px) {
                padding: 8px;
            }

            &:hover {
                background-color: rgba(255, 255, 255, 0.15);
            }

            .chart-cover {
                width: 100px;
                height: 100px;
                border-radius: 6px;
                margin-bottom: 8px;

                @media (max-width: 768px) {
                    width: 80px;
                    height: 80px;
                }

                @media (max-width: 480px) {
                    width: 70px;
                    height: 70px;
                }
            }

            .chart-name {
                font-size: 13px;
                text-align: center;
                max-width: 100%;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;

                @media (max-width: 768px) {
                    font-size: 12px;
                }
            }
        }
    }

    .search-panel {
        padding: 15px;
        display: flex;
        flex-direction: column;

        @media (max-width: 768px) {
            padding: 10px;
        }
    }

    .search-bar {
        display: flex;
        margin-bottom: 15px;

        @media (max-width: 768px) {
            margin-bottom: 10px;
        }

        input {
            flex-grow: 1;
            padding: 10px 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 8px 0 0 8px;
            font-size: 14px;

            @media (max-width: 768px) {
                padding: 8px 12px;
                font-size: 13px;
            }

            &::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }
        }

        button {
            padding: 10px 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-left: none;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            cursor: pointer;
            border-radius: 0 8px 8px 0;
            transition: background-color 0.2s;

            @media (max-width: 768px) {
                padding: 8px 12px;
                font-size: 13px;
            }

            &:hover:not(:disabled) {
                background-color: rgba(255, 255, 255, 0.3);
            }

            &:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
        }
    }

    .search-results {
        li {
            display: flex;
            align-items: center;

            .song-cover-small {
                width: 40px;
                height: 40px;
                border-radius: 6px;
                margin-right: 12px;

                @media (max-width: 768px) {
                    width: 36px;
                    height: 36px;
                    margin-right: 10px;
                }
            }

            .song-details {
                display: flex;
                flex-direction: column;
                overflow: hidden;
                white-space: nowrap;

                .name {
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .artist {
                    opacity: 0.7;
                    font-size: 12px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
    }

    .no-results {
        text-align: center;
        margin-top: 50px;
        color: rgba(255, 255, 255, 0.5);

        @media (max-width: 768px) {
            margin-top: 30px;
            font-size: 14px;
        }
    }

    .song-list {
        list-style: none;
        padding: 10px;
        margin: 0;

        @media (max-width: 768px) {
            padding: 8px;
        }

        li {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s;

            @media (max-width: 768px) {
                padding: 8px;
            }

            &.active {
                background-color: rgba(255, 255, 255, 0.2);
            }

            &:hover {
                background-color: rgba(255, 255, 255, 0.15);
            }

            .index {
                width: 30px;
                text-align: center;
                opacity: 0.7;

                @media (max-width: 768px) {
                    width: 25px;
                    font-size: 13px;
                }
            }

            .name {
                flex-grow: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                @media (max-width: 768px) {
                    font-size: 14px;
                }
            }

            .artist {
                opacity: 0.6;
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 120px;

                @media (max-width: 768px) {
                    font-size: 12px;
                    max-width: 100px;
                }

                @media (max-width: 480px) {
                    max-width: 80px;
                }
            }
        }
    }

    .song-list-panel {
        padding: 10px;
        margin: 0;

        @media (max-width: 768px) {
            padding: 8px;
        }
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

// 新增触摸优化
@media (max-width: 768px) {

    // 增加触摸区域大小
    .control-btn,
    .tabs button,
    .song-list li,
    .charts-list li {
        -webkit-tap-highlight-color: transparent;
    }

    // 提高滚动性能
    .song-list,
    .charts-panel,
    .song-list-panel,
    .search-panel,
    .lyric-list,
    .main-panel {
        -webkit-overflow-scrolling: touch;
    }
}
</style>